<template>
    <el-row :gutter="24" v-for="msgInfo in messageList" :key="msgInfo.id" style="padding:10px">
        <el-col :span="24">
            <el-card shadow="always" class="msg-content-card">
                <span>{{msgInfo.content}}</span>
                <template #header>
                    <div class="card-header">
                        <span>{{msgInfo.name}}</span>
                        <div>
                            <span>{{ dateFormmater(msgInfo.updateTime) }}</span>
                            <el-popconfirm title="确认已处理完成？"  
                                confirmButtonText='是'
                                cancelButtonText='否' @confirm="optBtnClick(msgInfo)">
                                <template #reference>
                                    <el-button class="button" 
                                    type="text" v-show="msgInfo.status == 1"
                                    style="color:red;padding-right:10px" >未处理</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button class="button" 
                                    type="text" v-show="msgInfo.status == 0"
                                    style="color:green;padding-right:10px" >已处理</el-button>
                        </div>
                    </div>
                </template>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    import axios from 'axios'
    import { urlConfig } from '@/config'
    
    export default {
        name: 'chat-tab-pane',
        props:{
            contentList:{
                type:Array,
                defualt:[]
            }
        },
        data() {
            return {
                messageList:[]
            };
        },
        methods: {
            setMssageList(msgList){
                this.messageList = msgList;
            },
            addMessages(msg) {
                this.messageList.unshift(msg);
            },
            optBtnClick(msgInfo){
                let me = this;
                axios.post(urlConfig.URL_BASE+'/monitor/updateMonitorResultStatusByName?id='+msgInfo.id+"&status=0")
                .then((res) => {
                    let index = me.messageList.indexOf(msgInfo);
                    if(index > -1 ){
                        me.messageList = me.messageList.filter((contentItem) => {
                            return contentItem.name != msgInfo.name;
                        })
                        me.$emit('task-processed',msgInfo)
                    }
                })
                .catch((error) => {
                    console.log(error);
                })
            },
            dateFormmater(value){
                if(value && value.format){
                    return value.format("yyyy年MM月dd日")
                }else if(value && typeof(value) == 'number'){
                    return new Date(value).toLocaleString();
                }
                return value
            }
        },
        mounted(){
            this.messageList.push(...this.contentList);
        }
    }
</script>

<style>
.card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .msg-content-card .el-card__header{
      padding: 2px;
  }
  .msg-content-card .el-card__body{
      text-align: left;
  }
  .msg-content-card .card-header button{
      padding-left: 20px;
  }
</style>
